<?php
ob_start();
session_start();
if(!isset($_SESSION['user'])){
	echo  "请你先登陆<a href=\"/index.php\">login</a>";
	exit();
}
?>

<div data-role="page">

<div data-role="header" data-position="inline" data-theme="c" class="ui-header ui-bar-c" role="banner">
	<a 	href="/home.php" 
		data-icon="home" 
		iconpos="notext" 
		class="ui-btn-left ui-btn ui-btn-up-c ui-btn-icon-left ui-btn-corner-all ui-shadow" 
		data-theme="c">
		<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
			<span class="ui-btn-text">返回主页</span>
			<span class="ui-icon ui-icon-home ui-icon-shadow"></span>
		</span>
	</a>
	<h1 class="ui-title" tabindex="0" role="heading" aria-level="1" id="pageTitle">当月各类消费统计</h1>
	<a 	href="/user/previous.php" 
		data-icon="arrow-r" 
		data-iconpos="right" 
		data-theme="b" 
		class="ui-btn-right ui-btn ui-btn-up-b ui-btn-icon-right ui-btn-corner-all ui-shadow">
		<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
			<span class="ui-btn-text">去查询其他月份</span>
			<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span>
		</span>
	</a>
	
</div><!-- /header -->
<div data-role="content">
	<style>
		table { width:100%; background:#f3f7f5; }
		table caption { text-align:left;  }
		table thead th { text-align:left; border-bottom-width:1px; border-top-width:1px; }
		table th, td { text-align:left; padding:6px;} 
		.pages a
		{
			padding:5px 10px;
		}
		.pages em
		{
			padding-right:10px;
		}
		.tableFloatingHeader
		{
			color: white; 
			background-color: black;
		}
	</style>

	<script type="text/javascript">
		$("tr:odd").css("background-color", "#bbbbff");
        function UpdateTableHeaders() {

            $("div.divTableWithFloatingHeader").each(function() {

                var originalHeaderRow = $(".tableFloatingHeaderOriginal", this);

                var floatingHeaderRow = $(".tableFloatingHeader", this);

                var offset = $(this).offset();

                var scrollTop = $(window).scrollTop();

                if ((scrollTop > offset.top) && (scrollTop < offset.top + $(this).height())) {

                    floatingHeaderRow.css("visibility", "visible");

                    floatingHeaderRow.css("top", Math.min(scrollTop - offset.top, $(this).height() - floatingHeaderRow.height()) + "px");

                    // Copy cell widths from original header

                    $("th", floatingHeaderRow).each(function(index) {

                        var cellWidth = $("th", originalHeaderRow).eq(index).css('width');

                        $(this).css('width', cellWidth);
                    });

                    // Copy row width from whole table

                    floatingHeaderRow.css("width", $(this).css("width"));
                }
                else {
                    floatingHeaderRow.css("visibility", "hidden");
                    floatingHeaderRow.css("top", "0px");
                }
            });
        }

        $(document).ready(function() {

            $("table.tableWithFloatingHeader").each(function() {
                $(this).wrap("<div class=\"divTableWithFloatingHeader\" style=\"position:relative\"></div>");
                var originalHeaderRow = $("tr:first", this)
                originalHeaderRow.before(originalHeaderRow.clone());
                var clonedHeaderRow = $("tr:first", this)
                clonedHeaderRow.addClass("tableFloatingHeader");
                clonedHeaderRow.css("position", "absolute");
                clonedHeaderRow.css("top", "0px");
                clonedHeaderRow.css("left", $(this).css("margin-left"));
                clonedHeaderRow.css("visibility", "hidden");
                originalHeaderRow.addClass("tableFloatingHeaderOriginal");
            });
            UpdateTableHeaders();
            $(window).scroll(UpdateTableHeaders);
            $(window).resize(UpdateTableHeaders);
        });

    </script>

<table summary="账单列表" class="tableWithFloatingHeader">
  <thead style=" background-color: gray; color: whitesmoke;">
	<tr>
		<th scope="col">类别</th>
		<th scope="col">小计(人民币)</th>
	</tr>
  </thead>
  
<?php
require('../config.php');
require('page.class.php');
mysql_select_db(SAE_MYSQL_DB,$conn) or die("数据库".SAE_MYSQL_DB."连接失败!");
 
$sum="SELECT sum(spmoney) as 'littleSum' , `spopt`  FROM sp WHERE  month(sptime)=month(now()) group by `spopt`";
$result=mysql_query($sum,$conn);
	echo ' <tfoot><tr><td colspan="2">';
	echo "存钱!";
	echo '</td></tr></tfoot>'; 
	echo '<tbody>';
while($list=mysql_fetch_array($result)){
	$littlesum=round($list['littleSum']);
	echo '<tr><th scrop=\'row\'>'.$list['spopt'].'</th><td class=\'money\'>'.$littlesum.'</td></tr>';
	}
	echo '</tbody></table>';

	echo '<div class=\'footer\'>';
	ob_end_flush();
	echo '</div>';
?>
 
</div>

<div data-role="footer">
<h1>我爱宝宝@香柱元</h1>
</div>
</div>
